<template>
  <view style="margin-top: 50px">
    <wd-steps :active="active" align-center>
      <wd-step title="步骤1" description="扫描快递二维码">66</wd-step>
      >
      <wd-step title="步骤2" description="扫描订单二维码"/>
      <wd-step title="步骤3" description="提交"/>
    </wd-steps>
    <p>&nbsp;</p>
    <wd-card class="card" style="margin-top: 30px">
      <wd-cell size="large" title="快递单号" :value="shortOrderId"/>
      <wd-cell size="large" title="快递公司" value="京东快递"/>
    </wd-card>
    <p>&nbsp;</p>
    <wd-row style="margin-top: 30px">
      <wd-col :span="16" :offset="6">
        <wd-button size="large" @click="handleCameraScan('order')">扫描快递二维码</wd-button>
      </wd-col>
    </wd-row>
    <p>&nbsp;</p>
    <wd-card style="margin-top: 30px">
      <wd-cell size="large" title="订单单号" :value="shortLogisticsId"/>
    </wd-card>
    <p>&nbsp;</p>
    <wd-row style="margin-top: 30px">
      <wd-col :span="16" :offset="6">
        <wd-button size="large" @click="handleCameraScan('logistics')">扫描订单二维码</wd-button>
      </wd-col>
    </wd-row>
  </view>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <wd-row style="margin-top: 30px">
    <wd-col :span="16" :offset="4">
      <wd-button block type="success" size="large" @click="submitForm">点击提交按钮</wd-button>
    </wd-col>
  </wd-row>
</template>

<script setup lang="ts">
import {ref} from 'vue'

const form = ref()
const active = ref<number>(0)

function nextStep() {
  active.value = active.value + 1
}

import {
  ref,
  computed
} from 'vue'

// 响应式数据
const orderId = ref('')
const logisticsId = ref('')
const successCount = ref(0)
const feedbackMessage = ref('准备就绪')

// 计算属性
const shortOrderId = computed(() =>
    orderId.value ? `${orderId.value.slice(0, 4)}****${orderId.value.slice(-4)}` : '待扫描'
)

const shortLogisticsId = computed(() =>
    logisticsId.value ? `${logisticsId.value.slice(0, 4)}****${logisticsId.value.slice(-4)}` : '待扫描'
)

// 摄像头扫码处理
const handleCameraScan = async (type) => {
  try {
    // 请求摄像头权限
    await uni.authorize({
      scope: 'scope.camera'
    });

    const res = await uni.scanCode({
      scanType: ['barCode', 'qrCode'],
      onlyFromCamera: true
    });

    if (type === 'order') {
      orderId.value = res.result;
      nextStep();
      console.log(orderId.value)
    } else {
      logisticsId.value = res.result;
      nextStep();
      console.log(logisticsId.value)
    }
  } catch (error) {
    if (error.errMsg === 'authorize:fail') {
      feedbackMessage.value = '未获取到摄像头权限';
    } else {
      feedbackMessage.value = '扫码取消或失败';
    }
    console.error('Error during scanning:', error);
  }
};

// 重置表单
const resetForm = () => {
  orderId.value = ''
  logisticsId.value = ''
}
const submitForm = () => {
  resetForm();
  active.value=0;
}
</script>

<style>
page {
  background-color: #fafafa; /* 这里设置为你想要的灰色 */
}
</style>
